<template>
<div class="floor">
    <ul>
        <!-- <li v-for="(item,i) in floorItem" :key="i" @click="floorFirst">{{item}}</li> -->
        <li @click="floorFirst()">印刷耗材及配件</li>
        <li @click="floorSecond()">印前设备</li>
        <li @click="floorThird()">印后设备</li>
        <li @click="floorTop()">^</li>
    </ul>
</div>
</template>

<script>
export default {
    data() {
        return {
            // floorItem: {
            //     floor1: '印刷耗材及配件',
            //     floor2: '印前设备',
            //     floor3: '印后设备',
            //     floor4: ''
            // }
        }
    },
    methods: {
        floorFirst() {
            document.querySelector("#printing").scrollIntoView(true);
        },
        floorSecond() {
            document.querySelector("#prepress").scrollIntoView(true);
        },
        floorThird() {
            document.querySelector("#postPrinting").scrollIntoView(true);
        },
        floorTop() {
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
        }
    },
}
</script>

<style lang="less" scoped>
.floor {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);

    ul {
        :nth-child(1) {
            line-height:16px;
        }

        :nth-child(4) {
            font-weight: bold;
            font-size: 20px;

        }

        li {
            width: 50px;
            height: 50px;
            border: 1px solid #DBDBDB;
            border: 1px solid #D92410;
            margin-bottom: 10px;
            text-align: center;
            padding: 9px 0;
            box-sizing: border-box;
            cursor: pointer;
            color: #D92410;
            font-size: 12px;
              line-height: 30px;
            &:hover {
                background-color: #F9E9E9;
            }
        }
    }
}
</style>
